<template>
  <div class="search_container">
    <form action="/">
      <van-search
        v-model="kw"
        show-action
        shape="round"
        
        placeholder="请输入搜索关键词"
        @input="onSearch"
        @search="onSearch"
        @cancel="onCancel"
      >
   
      </van-search>
    </form>

    <div class="com" v-show="!kw">
      <!-- 搜索历史 -->
      <search-history> </search-history>
      <search-rank></search-rank>
    </div>
    <div class="search_com" v-show="kw">
      <ul>
        <li class="album" v-if="album.img">
          <a :href="`#/${album.url}`">
            <div class="img">
              <img :src="album.img" alt="" />
            </div>
            <div class="info">
              <div class="title">{{ album.title }}</div>
              <div class="btn">
                <span class="cate">{{ album.cate_title }}</span>
                <span class="pCount"
                  ><van-icon name="service" /> {{ album.play | getCount }}</span
                >
                <span class="jCount"
                  ><van-icon name="music" /> {{ album.tracks }}</span
                >
              </div>
            </div>
            <div class="bf">
              <van-icon name="play-circle" />
            </div>
          </a>
        </li>
        <li class="sr_item" v-for="(item, i) in list" :key="i"
        @click='getHis(item)'
        >
          <a :href="`#/search/detail/${item}`">
            <div class="tt_info">
              {{ item }}
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import SearchHistory from "@/views/search/searchcomp/SearchHistory";
import SearchRank from "@/views/search/searchcomp/SearchRank.vue";
import { initSearchKeyworkData } from "@/request/api.js";
import { initAllSearchData } from "@/request/api.js";
import { Search } from 'vant'
export default {
  name: "MySearch",
  data() {
    return {
      kw: "",
      isShow: false,
      list: [],
      album: {},
      test: [],
    };
  },
  components: {
    SearchHistory,
    SearchRank,
  },
  created() {},
  methods: {
    onSearch() {
      if (this.kw) {
        this.getSearch();
        this.getAlbum();
      }
    },
    onCancel() {
      this.value = "";
      this.$router.go(-1);
    },
    async getSearch() {
      let { data: res } = await initSearchKeyworkData(this.kw);

      this.list = res.data.filter((item) => item.includes(this.kw));
    },

    async getAlbum() {
      let params = {
        kw: this.kw,
        core: "album",
        page: 1,
        rows: 20,
      };

      let { data: res } = await initAllSearchData(params);

      //   console.log("专辑", res.data.albumViews.albums);

      let list = [];
      res.data.albumViews.albums.forEach((item) => {
        list.push(item.albumInfo.title);
      });
      this.test = list;

      let obj = res.data.albumViews.albums.splice(0, 1)[0];
      this.album = {
        title: obj.albumInfo.title,
        albumId: obj.albumInfo.id,
        img: obj.albumInfo.cover_path,
        cate_title: obj.albumInfo.category_title,
        play: obj.albumInfo.play,
        tracks: obj.albumInfo.tracks,
        url: obj.pageUriInfo.url,
      };

      // this.album = object
    },

    getHis(word) {
      let arr = JSON.parse(localStorage.getItem("his"));

      if (arr) {
        arr.forEach((item, i) => {
          if (item == word) {
            arr.splice(i, 1);
          }
        });
      } else {
        arr = [];
      }

      arr.unshift(word);
      localStorage.setItem("his", JSON.stringify(arr));
    },
  },
  mounted() {
    //  window.localStorage.setItem('his',JSON.stringify([]))
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.search_com {
  padding: 0 15px;
  ul {
    li {
      a {
        display: block;
        display: flex;
        align-items: center;
        .img {
          width: 40px;
          height: 40px;
          > img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
        }
        .bf {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          color: #ededee;
        }
        .info {
          flex-grow: 1;
          height: 40px;
          padding: 0 5px 0 10px;
          .title {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 14px;
            color: #40404c;
            margin-bottom: 4px;
          }
          .btns {
            font-size: 12px;
            color: #a3a3ac;
          }
        }
      }
    }
    .sr_item {
      a {
        .tt_info {
          width: 100%;
          height: 41px;
          line-height: 41px;
          font-size: 14px;
          color: #40404c;
          border-bottom: 1px solid #e8e8e8;
        }
      }
    }
    .album {
      padding: 15px 0;
      border-bottom: 1px solid #e8e8e8;
      .info {
        .title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .btn {
          color: #a3a3aa;
          font-size: 12px;
          .cate {
            border: 1px solid #a3a3aa;
            border-radius: 1px;
            padding: 0 5px;
            margin-right: 12px;
          }
          .pCount {
            margin-right: 14px;
          }
        }
      }
    }
  }
}
</style>

